<template>
  <div class="returned-equipment">
    <div class="page-header">
      <h2>已还器材</h2>
      <div class="header-actions">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="date-picker"
        />
      </div>
    </div>

    <el-table :data="returnedList" style="width: 100%">
      <el-table-column prop="id" label="借用编号" width="120" />
      <el-table-column prop="equipment" label="器材名称" width="150" />
      <el-table-column prop="borrowTime" label="借用时间" width="180" />
      <el-table-column prop="returnTime" label="归还时间" width="180" />
      <el-table-column prop="condition" label="归还状态" width="120">
        <template #default="scope">
          <el-tag :type="scope.row.condition === '完好' ? 'success' : 'warning'">
            {{ scope.row.condition }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="checker" label="验收人" width="120" />
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="viewDetails(scope.row)"
          >
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-model="detailsDialogVisible"
      title="归还详情"
      width="500px"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="借用编号">{{ selectedItem.id }}</el-descriptions-item>
        <el-descriptions-item label="器材名称">{{ selectedItem.equipment }}</el-descriptions-item>
        <el-descriptions-item label="借用时间">{{ selectedItem.borrowTime }}</el-descriptions-item>
        <el-descriptions-item label="归还时间">{{ selectedItem.returnTime }}</el-descriptions-item>
        <el-descriptions-item label="归还状态">{{ selectedItem.condition }}</el-descriptions-item>
        <el-descriptions-item label="验收人">{{ selectedItem.checker }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ selectedItem.notes || '无' }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const dateRange = ref([])
const detailsDialogVisible = ref(false)
const selectedItem = ref({})

const returnedList = ref([
  {
    id: 'B001',
    equipment: '显微镜',
    borrowTime: '2024-12-01 09:30',
    returnTime: '2024-12-10 15:30',
    condition: '完好',
    checker: '李主任',
    notes: '设备完好，无损坏'
  },
  {
    id: 'B002',
    equipment: '烧杯',
    borrowTime: '2024-12-05 14:20',
    returnTime: '2024-12-11 16:45',
    condition: '轻微损坏',
    checker: '王主任',
    notes: '烧杯有轻微划痕'
  }
])

const viewDetails = (row) => {
  selectedItem.value = row
  detailsDialogVisible.value = true
}
</script>

<style scoped>
.returned-equipment {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.date-picker {
  width: 300px;
}
</style>

